<template>
  <div>
    <div class="base">
      <div class="base-title">
        基本设置*
      </div>
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="100"
        class="base-from"
      >
        <Row>
          <Col span="11">
            <FormItem label="项目名称" prop="itemName">
              <Input
                v-model="formValidate.itemName"
                placeholder="请输入项目名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="截止日期" prop="endTime">
              <DatePicker
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择截止日期"
                v-model="formValidate.endTime"
              ></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="项目说明" >
          <Input
            v-model="formValidate.itemContent"
            maxlength="500"
            :autosize="{ minRows: 4, maxRows: 6 }"
            show-word-limit
            type="textarea"
            placeholder="请输入项目说明"
            style="width:100%"
          />
          <p>
            项目说明将展示在测评作答页面，供受测者阅读，可用于介绍测评目的及测评要求。最多允许输入
            <span class="emphasis">500</span> 字。
          </p>
        </FormItem>
        <FormItem prop="time">
          <Checkbox v-model="formValidate.isShow">允许受测者查看报告</Checkbox>
        </FormItem>
      </Form>
    </div>
    <br />
    <Button
      type="primary"
      style="float:right"
      @click="pushBaseMsg('formValidate')"
      >下一步</Button
    >
  </div>
</template>
<script>
import instance from '@/http/http'
import moment from 'moment'
export default {
  props: {
    formValidate: {
      type: Object,
      default: () => {
        return {
          itemContent: '',
          itemName: '',
          isShow: true,
          endTime: '',
          companyId: localStorage.getItem('companyId'),
          isUse: '',
          isDel: '',
          id: ''
        }
      }
    },
    ruleValidate: {
      type: Object,
      default: () => {
        return {
          itemName: [
            {
              required: true,
              message: '项目名称不能为空',
              trigger: 'blur'
            }
          ],
          
          isShow: {
            required: true,
            message: '是否允许受测者查看报告',
            trigger: 'blur'
          },
          endTime: {
            required: true,
            type: 'date',
            message: '结束时间不能为空',
            trigger: 'change'
          }
        }
      }
    }
  },

  methods: {
    pushBaseMsg(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.formValidate))
          data.isShow = data.isShow ? 0 : 1
          data.endTime = moment(this.startTime).format('YYYY-MM-DD HH:mm:ss')
          console.log()
          instance.post('/item/update', data).then(res => {
            if (res.code == 200) {
              this.$Message.success('新增成功')
              sessionStorage.setItem('itemId', res.data.id)
              this.$store.dispatch('changeTabName', '2')
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.base {
  width: 100%;
  padding-bottom: 20px;
  border: 1px solid #5cadff;
  .base-title {
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    background: #eee;
    line-height: 25px;
    color: #5cadff;
    border-bottom: 1px solid #5cadff;
  }
  .base-from {
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
    .emphasis {
      color: red;
    }
  }
}
</style>
